<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==formData.TabCurIndex?'text-orange cur':''"
					v-for="(item,index) in TabCur" :key="index" @tap="tabSelect" :data-id="index">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<!-- 数据库中读取活动 -->
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData"
			:collection="collection" @load="load" :field="field" orderby="date desc" :where="nwhere">
			<uni-list>
				<!-- 置顶活动：常规打卡签到活动 -->
				<uni-list-item direction="column" to="/pages/activities/uploadPic" v-if="options.TabCurIndex==0">
					<!-- 通过header插槽定义列表顶部显示为图片 -->
					<!-- 打卡活动 -->
					<template v-slot:header>
						<view style="display: flex; justify-content: center;">
							<image style="border-radius: 15px; width: 343px;" mode="widthFix" src="../../static/img/picActivities.png"></image>
						</view>
					</template>
				</uni-list-item>

				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<uni-list-item direction="column" v-for="item in data" :key="item._id" :show-badge='false'
					:to="'/pages/activities/detail?id='+item._id">
					<!-- 通过header插槽定义列表顶部显示为图片 -->
					<template v-slot:header>
						<view class="uni-thumb uni-content list-picture">
							<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
							<image :src="item.imgPath[0]" mode="heightFix"></image>
						</view>
						<view class="uni-title">
							<!-- 通过options将变量传入 -->
							<text class="text-red" v-if="item.date < options.today">已结束||</text>
							<text class="text-black text-bold">{{item.title}}</text>
						</view>
						<view class="desc">
							<text class="basis-sm text-grey justify-start">{{item.date}}</text>
							<image style="width: 40rpx;height: 40rpx;" src="../../static/icon/shop/icon.png"></image>
							<text class='basis-xs text-grey iconfont'>:{{item.scores}}</text>
							<view class="justify-end basis-sm">
								<image  style="width: 40rpx;height: 40rpx;" src="../../static/icon/act/person.png"></image>
								<text class="text-grey">:{{item.creator}}</text>
							</view>
							
							
						</view>
					</template>
				</uni-list-item>
			</uni-list>

			<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
		</unicloud-db>
		<!-- 暂不支持用户直接发起活动 -->
<!-- 		<view class="plus" hover-class="plus-around" v-if="hasLogin" @click="addActivity">
			<image src="../../static/icon/plusActivity.png" mode='aspectFit' style='  width: 100rpx;  height: 100rpx;'>
			</image>
		</view> -->
	</view>
</template>

<script>
	const app = getApp();
	import shareMsg from '@/common/shareMessage.js';
	export default {
		data() {
			return {
				collection: 'activities',
				field: 'title, scores, date, creator, imgPath',
				formData: {
					status: 'loading', // 加载状态
					today: '2021-01-01',
					TabCurIndex: 0
				},
				hasLogin: false,
				TabCur: [{
						index: 0,
						title: "全部",
						tag: ""
					},
					{
						index: 1,
						title: "燕巢录",
						tag: "&& tag =='燕巢录'"
					},
					{
						index: 2,
						title: "党建活动",
						tag: "&& tag =='党建活动'"
					},
					{
						index: 3,
						title: "讲座",
						tag: "&& tag =='讲座'"
					},
					{
						index: 4,
						title: "其他",
						tag: "&& tag =='其他'"
					}
				],
				nwhere: {
					onShow: true
				}
				// scrollLeft: 0
			}
		},
		methods: {
			onShareAppMessage() {
				var pathList = getCurrentPages()
				var path = pathList[pathList.length - 1].route
				return shareMsg.shareMsg({
					title: "AIIT活动中心",
					imageUrl: '/static/img/shareImg.png'
				})
			},
			/**
			 * 下拉刷新回调函数
			 */
			onPullDownRefresh() {
				this.tipShow = true
				this.formData.status = 'more'
				this.$refs.udb.loadData({
					clear: true
				}, () => {
					this.tipShow = false
					uni.stopPullDownRefresh()
				})
			},
			/**
			 * 上拉加载回调函数
			 */
			onReachBottom() {
				
				this.$refs.udb.loadMore()
			},
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			},

			onLoad(e) {
				let today_tmp = new Date();
				this.formData.today = today_tmp.toISOString().slice(0, 10);
			},

			onShow() {
				this.hasLogin = app.globalData.hasLogin;
			},

			tabSelect: function(e) {
				this.formData.TabCurIndex = e.currentTarget.dataset.id;
				this.nwhere = "onShow == true" + this.TabCur[this.formData.TabCurIndex].tag
				// this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			addActivity: function(e) {
				uni.navigateTo({
					url: './add'
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.list-picture {
		border-radius: 20rpx;
		width: 100%;
		height: 180px;
	}

	.desc {
		display: flex;
		justify-content: flex-start;
		width: 95%;
	}

	.bg-white {
		background-color: #ffffff;
		color: #666666;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.plus {
		position: fixed;
		right: 3%;
		bottom: 8%;
		border-radius: 50%;
	}

	.plus-around {
		animation: transplus 1s;
	}

	.daka {
		background-color: #00BFFF;
		height: 150rpx;
		width: 600rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
